<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
    <title>购买花粉</title>
    <script src="/static/js/common/jquery.js"></script>
    <script type="text/javascript" src="/static/js/util.js"></script>
    <script src="/static/js/init.js" type="text/javascript"></script>
    <script src="/static/js/fastclick.js"></script>

    <style type="text/css">
        body {
            padding:0; margin:0;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 14px;color: #1d1007;
            line-height:24px;background-color: #eeeeee;position: relative;
        }
        html,body{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
        .container {padding: 0; margin:0;background-color: #ffffff;}
        /*添加了overflow：hidden*/
        .tabs {background-color: #d9d9d9;padding:0;margin:0;overflow: hidden}
        li {list-style-type: none;-webkit-tap-highlight-color:transparent;}
        .tabs img {width: 2em;vertical-align: middle;}
        .tabs li {
            display:table-cell; width:50%;text-align: center;
            height:3.125em;line-height: 3.125em;
            -webkit-tap-highlight-color:transparent;
            color: #fff;
        }
        .tabs .tab1.active {background-color: #25abee;}
        .tabs .tab2.active{background: #1da442;}
        .tabs a {text-decoration: none;color:#000000;}
        .tabs .tab_icon {margin-right:0.625em;}
        .tab_container ul {margin-left:0.9375em;padding:0;margin-top:0;}
        .tab_content{display: none}
        .tab_container ul li {height:3.125em;line-height:3.125em; margin:0; padding:0; border-bottom:solid 0.0625em #e5e5e5;}
        .f_red {font-family: "PingFang-SC"; font-size: 0.875em;color: #34c0e3;}
        .f_border {
            width: 3.75em; height:1.4375em; display:inline-block;text-align: center;padding: 0.2em;
            vertical-align: middle;line-height: 1.4375em;float:right;margin-right:1em;margin-top:0.6em;
            background: #ffdf00;
            border-radius: 0.5em;
        }
        .tip {color:#999999;margin-top:0.3125em;margin-left:0.9375em;padding:0;}
        .buy_tip{text-align: center;background-color: #ff0000;height:2.125em;line-height:2.125em; margin:0; padding:0;color:#ffffff; }
        .show{display: block;}

        /* 新增*/
        .loader {
            -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;
            border: 0.1rem solid #ddd;
            border-top: 0.1rem solid #42a5f5;
            border-radius: 50%;
            height: 1.5rem;
            width: 1.5rem;
            position: absolute;
            top:40%;
            left: 50%;
            margin-left: -0.75rem;
        }

        @-webkit-keyframes spin {
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes spin {
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        .loader-con {
            margin: 0 auto;
            position: fixed;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            /*background: rgba(0,0,0,0.4);*/
        }
        .loader-con>p{
            text-align: center;
            position: absolute;
            width: 6rem;
            top:43%;
            left: 50%;
            margin-left: -3rem;
            font-size: 0.875em;
            color: #120411;
        }
        .hide{display: none}
        * { touch-action: none; }
    </style>
</head>
<body>
<script src="/static/js/Monitor.js"></script>
<div id="pay_result"></div>
<div class="container">
    <ul class="tabs">
        <li class="tab1 active" style="float:left;border-top-right-radius:1em;">
            <img class="tab_icon" src="/static/img/pay/zfb.png" />
            <a href="#tab_alipay" style="display: none;"></a>
            <span>支付宝支付</span>
            <img class="tuijian" src="/static/img/pay/tuijian.png" style="width: 2.3em" />
        </li>
        <li class="tab2" style="border-top-left-radius:1em;float:right;">
            <img class="tab_icon" src="/static/img/pay/weixin.png" />
            <a href="#tab_weixin" style="display:none;"></a>
            <span>微信支付</span>
        </li>
    </ul>
    <p class="buy_tip">建议使用支付宝购买花粉，比微信购买划算。</p>
    <div class="tab_container">
        <div id="tab_alipay" class="tab_content show">
            <ul>
            </ul>
        </div>
        <div id="tab_weixin" class="tab_content">
            <ul>
            </ul>
        </div>
    </div>
</div>
<div class="tip">充值遇到问题时，请点击右上角的联系客服 <p id="text"></p></div>

<div class="loader-con hide">
    <div class="loader"></div>
    <p>加载中...</p>
</div>

</body>
<script type="text/javascript">
    var accessId = getParameter("x-access-id") ? getParameter("x-access-id") : 0;
    var accessToken = getParameter("x-access-token") ? getParameter("x-access-token") : '';
    var ua = getParameter("x-ua") ? getParameter("x-ua") : 'unknown';
    var version=getParameter("x-version-code")? getParameter("x-version-code") : 0;
    var channel=getParameter("x-channel")? getParameter("x-channel") : 'unknown';
    var payModeMap = [[1, "#tab_alipay"], [2, "#tab_weixin"]];
    var href=window.location.href.split('?')[1];
    if(!(href && href.indexOf("x-ua")>-1 && href.indexOf("x-channel")>-1)){
        $('body').html("该页面已删除");
    }
    $(function() {
        FastClick.attach(document.body);
    });
    $(document).ready(function(){
        // 获取充值列表
        payModeMap.forEach(function (value, key, map) {
            $.ajax({
                url: genUrl("/wallet/getCommodityList"),
                type: 'GET',
                contentType: "application/json",
                data: {"payMode" : value[0],"tradePage":'ms-commodityList'},
                dataType: 'json',
                async: false,
                headers: {
                    "x-access-id": accessId,
                    "x-access-token": accessToken,
                    "x-ua": ua,
                    "x-version-code": version,
                    "x-channel": channel
                },
                success: function (obj) {
                    if(obj.code!=0){
                        alert(obj.message);
                        return;
                    }
                    // 数据渲染
                    comList(obj.data.walletCommodities, value)
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log("status:" + XMLHttpRequest.status + ", readyState:" + XMLHttpRequest.readyState + ", textSatatus:" + textStatus);
                }
            });
        });
        /*zepto点击事件*/
        //tab点击事件
        $(".tabs").find("li").each(function () {
            var index=$(this).index();
            $(this).click(function () {
                $(this).addClass("active").siblings().removeClass("active");
                $(".tab_container .tab_content").eq(index).addClass("show").siblings().removeClass("show");
            });
        });
        //子代点击事件
        clickList("#tab_alipay");
        clickList("#tab_weixin");
    });
    // 列表渲染
    function comList(list, value) {
        if(list){
            for(var i=0; i<list.length; i++){
                var item = list[i];
                var li = '<li style="cursor: pointer">';
                li += '<input type="hidden" class="commodityId" value="'+ item.id +'" /><input type="hidden" class="payMode" value="'+value[0]+'" />';
                li += item.coin + item.coinUnit;
                li += (item.coinPresent >0 ? '<span class="f_red">+ '+item.coinPresent+item.coinUnit+'</span>' : '');
                li += (item.tapechatNum >0 ? '<span class="f_red">+ '+item.tapechatNum+' 情书</span>' : '');
                li += '<span class="f_border">¥'+ item.price +'</span>';
                li += '</li>';
                $(value[1] + " ul").append(li);
            }
        }
    }
    //子代点击事件
    function clickList(ele){
        $(ele).on("click","li",function (e) {
            $(".loader-con").removeClass("hide");
            $(this).css("background","#eee")
            $(this).siblings("li").css("background","none");
            var commodityId=$(this).find(".commodityId").val();
            var payMode=$(this).find(".payMode").val();
            doPay(commodityId,payMode);
        });
    }
    // 绑定支付宝充值列表点击事件
    function doPay(commodityId,payMode) {
        if(payMode==1){
            alipay(commodityId);
        }else if(payMode==2){
            var params = {"commodityId":commodityId, "wxTradeType":"MWEB","tradePage":'ms-commodityList'};
           weixinpay(params)
        }else{
            alert("未知异常");
        }
        flag=true;
    };
    // 支付宝支付
    function alipay(commodityId) {
        $.ajax({
            url: genUrl("/alipay/createOrderByH5"),
            type: 'GET',
            contentType: "application/json",
            data: {"commodityId" : commodityId,"x-access-id":accessId,"tradePage":'ms-commodityList'},
            dataType: 'json',
            async: true,
            headers: {
                "x-access-id": accessId,
                "x-access-token": accessToken,
                "x-ua": ua,
                "x-version-code": version,
                "x-channel": channel
            },
            success: function (obj) {
                if(obj.code!=0){
                    alert(obj.message);
                    return;
                }
                if(ua.indexOf("android")>-1){
                    $(".loader-con").addClass("hide");
                }
                $("#pay_result").html(obj.data.orderInfo);
                document.forms[0].submit();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $(".loader-con").addClass("hide");
                console.log("status:" + XMLHttpRequest.status + ", readyState:" + XMLHttpRequest.readyState + ", textSatatus:" + textStatus);
            }
        });
    }
    // 微信支付
    function weixinpay(params) {
        $.ajax({
            url: genUrl("/wxpay/unifiedOrderByH5"),
            type: 'GET',
            contentType: "application/json",
            data: params,
            dataType: 'json',
            async: true,
            headers: {
                "x-access-id": accessId,
                "x-access-token": accessToken,
                "x-ua": ua,
                "x-version-code": version,
                "x-channel": channel
            },
            success: function (obj) {
                if(obj.code!=0){
                    alert(obj.message);
                    return;
                }
                window.location.href = obj.data.mwebUrl;
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $(".loader-con").addClass("hide");
                console.log("status:" + XMLHttpRequest.status + ", readyState:" + XMLHttpRequest.readyState + ", textSatatus:" + textStatus);
            }
        });
    }
</script>
</html>